<style>
    .modal .dropdown-menu{padding: 4px;}
    .modal .dropdown-menu li {height: 28px;width:28px;padding: 4px;float: left;cursor: pointer;margin: 2px}
    .modal .dropdown-menu li:hover{background-color: #1E90FF}
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li class="active">
                菜单管理
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page">
            <div class="col-sm-12 div-table">
                <div id="custom-toolbar">
                </div>
                <table id="table" class="table table-hover table-condensed" data-toolbar="#custom-toolbar"
                       data-click-to-select="true"  data-single-select="true" data-height="450">
                    <thead>
                    <tr>
                        <th class="col-sm-1" data-field="state" data-checkbox="true" ></th>
                        <th class="col-sm-4" data-field="Mpi_nameTree" data-halign="left" data-align="left" data-events="operateEvents">菜单名</th>
                        <th class="col-sm-3" data-field="Mpi_url" data-halign="center" data-align="center">URL</th>
                        <th class="col-sm-2" data-field="Mpi_sort" data-halign="center" data-align="center">排序</th>
                        <th class="col-sm-1" data-field="Mpi_typeShow" data-halign="center" data-align="center">类型</th>
                        <th class="col-sm-1" data-field="Mpi_note" data-halign="center" data-align="center">备注</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="col-sm-12 alert alert-success div-alert" id="events-result" data-es="Aquí se muestra el resultado del evento"></div>
        <!-- #遮罩层 --->
        <div class="modal fade" id="modal-DataEdit" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <div class="modal-title" id="myModalLabel">
                            菜单管理
                        </div>
                    </div>
                    <form id="validForm" name="validForm" method="post" class="form-horizontal layer_msg">
                        <input type="hidden" id="actionType" name="actionType" />
                        <input type="hidden" id="Mpi_id" name="Mpi_id" />
                        <input type="hidden" id="Mpi_parentid" name="Mpi_parentid" />
                        <input type="hidden" id="Mpi_delflag" name="Mpi_delflag" />
                        <input type="hidden" id="Mpi_icon" name="Mpi_icon" name="Mpi_icon" />

                        <div class="modal-body">
                            <div class="row-fluid">
                                <div class="col-sm-6 form-group">
                                    <label class="col-sm-4 control-label">菜单名</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="Mpi_name" name="Mpi_name" placeholder=""
                                               required  data-fv-notempty-message="请输入" />
                                    </div>
                                </div>
                                <div class="col-sm-6 form-group">
                                    <label class="col-sm-4 control-label">菜单类型</label>
                                    <div class="col-sm-8">
                                        <input type="hidden" class="form-control" id="Mpi_typeShow" name="Mpi_typeShow" />
                                        <select class="form-control" data-fv-notempty data-fv-notempty-message="扣费类型" id="Mpi_type" name="Mpi_type" onchange="">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="col-sm-6 form-group">
                                    <label class="col-sm-4 control-label">URL</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="Mpi_url" name="Mpi_url" placeholder=""
                                               />
                                    </div>
                                </div>
                                <div class="col-sm-6 form-group">
                                    <label class="col-sm-4 control-label">图标</label>
                                    <div class="col-sm-6 btn-group">
                                        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" style="text-align: left">
                                            &nbsp;<span id="imgSelected">请选择</span>&nbsp;
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu col-sm-12" style=" margin-left: 6%">
                                            <li>
                                                <span class="icon-sm arrowDown" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm arrowUp" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm arrowRight" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm arrowLeft" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm system" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm dict" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm menu" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm role" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm op" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm search" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm add" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm edit" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm del" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm organ" ></span>
                                            </li>


                                            <li>
                                                <span class="icon-sm customer" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm exit" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm list" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm bind" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm unbind" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row2-6" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm key" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm trade" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm tradeToday" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm tradeHistory" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm index" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row2-12" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row2-13" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm menuAllot" ></span>
                                            </li>


                                            <li>
                                                <span class="icon-sm row3-1" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-2" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-3" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-4" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-5" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-6" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-7" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm row3-8" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm collapseAll" ></span>
                                            </li>
                                            <li>
                                                <span class="icon-sm logout" ></span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="col-sm-6 form-group">
                                    <label class="col-sm-4 control-label">备注</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="Mpi_note" name="Mpi_note" placeholder=""
                                                />
                                    </div>
                                </div>
                                <div class="col-sm-6 form-group">
                                    <label class="col-sm-4 control-label">排序</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="Mpi_sort" name="Mpi_sort" placeholder=""
                                                />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="modal-btn-save" type="submit" class="btn btn-primary">保存</button>
                            <button id="modal-btn-del" type="button" class="btn btn-danger">确认删除</button>
                            <button id="modal-btn-close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

$(function(){
    $(".dropdown-menu li").click(function(){
        var value=$(this).find("span").attr("class");
        $("#Mpi_icon").val(value);
        $("#imgSelected").removeClass().addClass(value).html("");
    });
    //绑定列自定义事件
    window.operateEvents = {
        'click span': function (e, value, row, index) {
            opTree($("#table tbody ").find("tr").eq(index),"");
        }
    };


    ///获取role按钮权限
    var btnHtml ;
    var btnRole = JSON.parse($.cookie("Role_note"));

    btnHtml = '<div class="form-inline" role="form">';
    btnHtml += (btnRole["CommonDataAdd"]) ? '<button id="btn-CommonDataAdd"  type="button" role="button" class="btn btn-sm btn-Data btn-primary">' +
            '<span class="glyphicon glyphicon-plus"></span> 新增</button> ' : '' ;
    btnHtml += (btnRole["CommonDataModify"]) ? '<button id="btn-CommonDataModify" type="button" role="button" class="btn btn-sm btn-Data btn-success disabled">' +
            '<span class="glyphicon glyphicon-pencil"></span> 修改</button> ' : '' ;
    btnHtml += (btnRole["CommonDataCancel"]) ? '<button id="btn-CommonDataCancel"  type="button" role="button" class="btn btn-sm btn-Data btn-danger disabled" >' +
            '<span class="glyphicon glyphicon-trash"></span> 删除</button> ' : '' ;

    $("#custom-toolbar").append(btnHtml);

    $('#table').bootstrapTable({
        url: globalUrl+'api/Menu',
        responseHandler:function(resp){
            var dataSet=[];
            //alert(JSON.stringify(resp.data));
            var data = resp.data[0].children;
            GetTreeMenuData(dataSet,0,data);
            //alert(JSON.stringify(dataSet));
            return dataSet;
        },
        pagination:false,
        search:true
    })
            .on('click-row.bs.table', function (e, row, $element) {
                //$("#events-result").text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
                /* by lichun 切换选中颜色*/
                if ( $element.hasClass('selected') ) {
                    //$element.removeClass('info');
                }
                else {
                    //$element.parent('tbody').find(' > tr.selected ').removeClass("info");
                    //$element.addClass('info');
                }
                /////////////////////////////////////////
                //树型菜单效果
                //opTree($element,"");

                ///////////////////////////
            })
            .on('dbl-click-row.bs.table', function (e, row, $element) {
                //$("#events-result").text('Event: dbl-click-row.bs.table, data: ' + JSON.stringify(row));
            })
            .on('check.bs.table', function (e, row) {
                //$("#events-result").text('Event: check.bs.table, data: ' + JSON.stringify(row));
                $(".btn-Data").removeClass("disabled");
                if(row["Mpi_type"]!="0000000004"){
                    $("#btn-CommonDataAdd").addClass("disabled");
                }else{
                    $("#btn-CommonDataAdd").removeClass("disabled");
                }
                if(row["_class"]=="level1 hasChild" || row["_class"]=="level1 hasChild selected info"){
                    $("#btn-CommonDataCancel").addClass("disabled");
                }
                else{
                    $("#btn-CommonDataCancel").removeClass("disabled");
                }
            })
            .on('uncheck.bs.table', function (e, row) {
                //$("#events-result").text('Event: uncheck.bs.table, data: ' + JSON.stringify(row));
                $(".btn-Data").addClass("disabled");
                $("#btn-CommonDataAdd").removeClass("disabled");
            });

    ///下拉列表绑定变更事件
    $('#Mpi_type').change(function(){
        refreshSelectShow($("#Mpi_type"),$("#Mpi_typeShow"));
    });

    /*筛选框下拉列表初始化_add_ywq_20140123-Start*/
    FormatSelect(globalUrl+"api/Dict?Typeid=0000000004",$("#Mpi_type"),"请选择","",function(resp){});
    /*筛选框下拉列表初始化_add_ywq_20140123-End*/

///弹出层验证，submit时生效
    $('#validForm')
            .formValidation({
                message: 'This value is not valid',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                }
            })
            .on('success.form.fv', function(e) {
                e.preventDefault();
                var $form = $(e.target);
                var bv = $form.data('formValidation');
                if($('#validForm').find(' input[name="actionType"] ').val()=="edit")
                {
                    // Use Ajax to submit form data
                    var data = JsonToRow($form);
                    //alert(JSON.stringify(data));
                    $.ajax({
                        data:data,
                        type: "put",
                        url: globalUrl+"api/Menu",
                        dataType: "json",
                        success: function (resp) {
                            //alert(JSON.stringify(resp));
                            if(resp.result)
                            {
                                //$("#events-result").text('Send data: ' + $form.serialize());
                                //$("#events-result").text('Send data: create site ok');
                                dataBindToMenuTable($('#table'),$('#validForm'));

                                //关闭弹出窗口
                                $('#modal-DataEdit').modal('hide');
                            }
                            else
                            {
                                alert(JSON.stringify(resp));
                            }
                        },
                        error:function(){
                            alert("插入数据失败！");
                        }
                    });
                }else if($('#validForm').find(' input[name="actionType"] ').val()=="add")
                {
                    // Use Ajax to submit form data
                    //$("#Mpi_parentid").val($("#Mpi_id").val());
                    var data = JsonToRow($form);
                    //alert(JSON.stringify(data));
                    $.ajax({
                        data:data,
                        type: "post",
                        url: globalUrl+"api/Menu",
                        dataType: "json",
                        success: function (resp) {
                            //alert(JSON.stringify(resp));
                            if(resp.result)
                            {
                                $("#Mpi_id").val(resp.msg);
                                //$("#events-result").text('Send data: ' + $form.serialize());
                                //$("#events-result").text('Send data: create site ok');
                                dataAddToMenuTable($('#table'),$('#validForm'));
                                $('#btn-CommonDataCancel').addClass("disabled");
                                //关闭弹出窗口
                                $('#modal-DataEdit').modal('hide');
                            }
                            else
                            {
                                alert(JSON.stringify(resp));
                            }
                        },
                        error:function(){
                            alert("插入数据失败！");
                        }
                    });
                }else{

                }

            });

});

///表格事件/////////////////////////////////////////////////////


function GetLevelClass(index){
    var organLevelClass = ['level1','level2','level3','level4'];
    resp = organLevelClass[parseInt(index)-1];
    return resp;
}

//新增按钮
$('#btn-CommonDataAdd').on("click",function () {

    var Mpi_id = "0";
    dataBindToModal($('#validForm'),null);
    $('#validForm').find(' input[name="actionType"] ').val("add");
    if($('#table').bootstrapTable('getSelections').length>0){
        Mpi_id = $('#table').bootstrapTable('getSelections')[0]["Mpi_id"];
    }
    $('#validForm').find(' input[name="Mpi_parentid"] ').val(Mpi_id);
    $('#validForm').find(' input[name="Mpi_delflag"] ').val("00");
    $("#imgSelected").removeClass().html("请选择");
    //$("#events-result").text('Selected values: ' + JSON.stringify($('#validForm').serializeArray()));
    $('#modal-btn-del').addClass('hidden');
    $('#modal-btn-save').removeClass('hidden');
    $('#modal-DataEdit').modal('show');
});
//编辑按钮数据传递
$('#btn-CommonDataModify').on("click",function () {

    dataBindToModal($('#validForm'),$('#table'));
    $('#validForm').find(' input[name="actionType"] ').val("edit");
    //同步更新下拉列表selected事件
    SetSelectSelected($('#Mpi_type'),$('#Mpi_type').val());
    $("#imgSelected").removeClass().addClass($('#table').bootstrapTable('getSelections')[0]["Mpi_icon"]).html("");
    //$("#events-result").text('Selected values: ' + JSON.stringify($('#validForm').serializeArray()));
    $('#modal-btn-del').addClass('hidden');
    $('#modal-btn-save').removeClass('hidden');
    $('#modal-DataEdit').modal('show');
});
//删除按钮
$('#btn-CommonDataCancel').on("click",function () {

    dataBindToModal($('#validForm'),$('#table'));
    $("#imgSelected").removeClass().addClass($('#table').bootstrapTable('getSelections')[0]["Mpi_icon"]).html("");
    //$("#events-result").text('Selected values: ' + JSON.stringify($('#validForm').serializeArray()));
    $('#modal-btn-del').removeClass('hidden');
    $('#modal-btn-save').addClass('hidden');
    $('#modal-DataEdit').modal('show');
});

///弹出层事件/////////////////////////////////////////////////////
//弹出层关闭时重置valid域
$('#modal-DataEdit').on("hide.bs.modal",function () {
    $('#validForm').data('formValidation').resetForm();
    if($('#table').bootstrapTable('getSelections').length==0){
        $(".btn-Data").addClass("disabled");
    }

});

//删除
$('#modal-btn-del').on("click",function () {

    //$("#events-result").text('Selected values: ' + $('#validForm').serialize());

    var date = $('#validForm').serialize();
    //alert(JSON.stringify(date));
    $.ajax({
        type: "delete",
        data: "",
        dataType: "json",
        url: globalUrl+"api/Menu?"+date,
        success: function (resp) {
            //alert(JSON.stringify(resp));
            if(resp.result)
            {
                //$("#events-result").text('Send data: ' + $('#validForm').serialize());
                dataDelFromTable($('#table'));
                $("#btn-CommonDataAdd").removeClass("disabled");
                //关闭弹出窗口
                $('#modal-DataEdit').modal('hide');
            }
            else
            {
                alert(JSON.stringify(resp));
            }
        },
        error:function(){
            alert("更新数据失败！");
        }
    });
});

</script>
<!-- /自定义脚本 -->



